<template>
  <div class="classificationBox">
    <!-- 1.头部标签 -->
    <HeadBar
      :isShowLeftIcon="false"
      @isShowComponent="ComponentHandler"
    ></HeadBar>

    <!-- 2. 点击搜索 -->

    <van-button
      type="default"
      color="rgb(237, 237, 237)"
      round
      block
      size="small"
      @click="
        $router.push({
          name: 'search',
          params: {
            a: 'A',
            b: 'B',
          },
        })
      "
    >
      <!-- to="/search" -->
      <van-icon name="search" />
      <span>商品搜索 共239款好物</span>
    </van-button>

    <!-- 3.选项卡 -->

    <div class="main">
      <div class="left">
        <van-sidebar v-model="activeKey" @change="onChange">
          <van-sidebar-item
            :title="obj.name"
            v-for="obj in categoryList"
            :key="obj.id"
          />
        </van-sidebar>
      </div>
      <div class="right">
        <!-- 右侧第一部分 -->
        <div class="topImg">
          <img :src="currentObj.wap_banner_url" alt="" />
        </div>
        <!-- 右侧第二部分 -->
        <p class="title-Text">----{{ currentObj.name }}----</p>
        <!-- 右侧第三部分 -->
        <div class="con-catcar">
          <div class="con-item" @click="clickItemHandler(item.id)"  v-for="item in subCategoryList" :key="item.id">
            <img :src="item.banner_url" alt="" />
            <span>{{ item.name }}</span>
          </div>
        </div>
      </div>
    </div>


<!-- 4.展示详情 -->
    <GoodsList class="GoodsList" 
    v-if="isShowGoodsList"
     @hideCom="isShowGoodsList=$event"
     :detailId="detailId"
     ></GoodsList>
  </div>
</template>

<script>
import HeadBar from "@/components/HeadBar";
import { getClassAll, getSubCa } from "@/api/classification";
// 导入 列表组件
import GoodsList from "./components/GoodsList.vue";


export default {
  name: "classificationIndex",
  data() {
    return {
      isShowComponent: true,
      activeKey: 0,
      categoryList: [], // 所有数据
      subCategoryList: [], //子数组
      currentObj: {}, //当前对象
      classId: 0,
      isShowGoodsList:false ,// 控制是否显示这个组件;
      detailId:null
    };
  },
  created() {
    this.getClassAllHandler();
  },
  methods: {
    clickItemHandler(id){
      this.isShowGoodsList = true;//显示组件;
      this.detailId = id
      console.log(this.detailId);
    },
    ComponentHandler() {
      console.log("Ok"); //点击左侧 < 触发这个事件;
    },
    // 切换的时候 触发
    onChange() {
      // this.subCategoryList = this.categoryList[this.activeKey].subCategoryList;
      this.currentObj = this.categoryList[this.activeKey];
      this.classId = this.currentObj.id;
      this.getSubCaHandler();
    },
    // 请求数据;
    async getClassAllHandler() {
      const {
        data: {
          data: { categoryList },
        },
      } = await getClassAll();
      this.categoryList = categoryList;
      this.subCategoryList = categoryList[this.activeKey].subCategoryList;
      this.currentObj = this.categoryList[this.activeKey];
    },
    // 获取每一个子列表
    async getSubCaHandler() {
      try {
        const { data } = await getSubCa({ id: this.classId });
        this.subCategoryList  = data.data.currentCategory.subCategoryList

      } catch (err) {
        console.log(err.message);
      }
    },
  },
  components: {
    HeadBar,
    GoodsList
  },
};
</script>

<style scoped lang="scss">
::v-deep .van-button--block {
  width: 90%;
  // margin: 20px 0;
  margin: 30px auto 10px auto;
}
::v-deep van-icon-search,
::v-deep .van-button__text {
  color: #666;
  font-size: 30px !important;
}
.main {
  display: flex;
  border-top: 1px solid #eee;
  padding-top: 20px;
  background-color: rgb(245, 247, 249);
  .left {
    flex: 2;
  }
  .right {
    flex: 8;
    box-sizing: border-box;
    padding-left: 20px;
  }
}
::v-deep .van-sidebar-item {
  padding: 32px 0 !important;
  display: flex;
  justify-content: center;
  align-items: center;
}
::v-deep .van-sidebar-item--select::before {
  height: 100% !important;
  width: 6px;
}
::v-deep .van-button--default {
  margin-bottom: 20px !important;
}

.topImg {
  width: 530px;
  height: 200px;
  // border: 1px solid #000;
  margin: 0 auto;
  img {
    width: 100%;
    height: 100%;
  }
}
.title-Text {
  font-size: 28px;
  color: #666;
  text-align: center;
  padding: 20px 0;
}

.con-catcar {
  display: flex;
  flex-wrap: wrap;
  // justify-content: space-evenly;
  .con-item {
    width: 33%;
    height: 150px;
    // margin-bottom: 20px;
    // background-color: #f00 !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #666;
    font-size: 28px;
    img {
      width: 40%;
    }
  }
}

.GoodsList{
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index:10;
  overflow-y: auto;
}
</style>
